<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div class="root">
    <!--v-bind: 单向绑定是指,数据的改变可以影响页面的改变,但是页面的改`变无法影响数据的改变-->
    <label>单向数据绑定<input type="text" v-bind:value="name"></label>
    <label>单向数据绑定<input type="text" :value="name"></label>
    <br>
    <!--v-model: 双向绑定是指,数据的改变可以影响页面的改变,页面的改变也可以影响数据的改变-->
    <label>双向数据绑定<input type="text" v-model:value="name"></label>
    <label>双向数据绑定<input type="text" v-model="name"></label>

</div>
<script>
    new Vue({
        el: '.root',
        data: {
            name: '曾宇杰',
        }
    })

    /**
     * 单向绑定用v-bind:数据只能从data流向页面    简写为 :
     * 双向绑定用v-model:数据不仅可以从data流向页面,也可以从页面流向data    简写时可以将属性值 :value 去掉 比如:v-model="name"
     * v-model只能用于表单上元素上(输入类元素,需要有value属性,可以进行页面输入修改的元素)
     */
</script>
</body>
</html>